<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS练习部分</title>
</head>


<!-- <style>
        * {
        margin: 0;
        padding: 0;
        }
    html,
    body {
        width: 100%;
        height: 100%;
    }

    .container {
        width: 100%;
        height: 100%;
    }

    .light {
    background-color: #f3f3f3;
    color: #333;
    }

    .dark {
    background-color: #333;
    color: #f3f3f3;
    }
</style> -->



<body>
    
    <!-- <script>
        //alert("你好！");
        //prompt("请输入您的名字");
        console.log("这是一条日志");
        // log("随便打点东西");
        console.log();
    </script> -->

    <!-- <div class="box">abc</div>
    <div id="id">def</div>
    <h3><span><input type="text"></span></h3>

    <script>
        var elem1 = document.querySelector('.box');
        console.log(elem1);
        var elem2 = document.querySelector('#id');
        console.log(elem2);
        var elem3 = document.querySelector('h3 span input')
        console.log(elem3);
    </script>


    <div class="box">abc</div>
    <div id="id">def</div>
    <script>
        var elems = document.querySelectorAll('div');
        console.log(elems);
    </script> -->

    <!-- <button id="btn">点我一下</button>
    <script>
        var btn = document.getElementById('btn');
        btn.onclick = function() {
            alert("hello world");
        }
    </script> -->

    <!-- <div>
        <span>hello world</span>
        <span>hello world</span>
    </div>

    <script>
        var div = document.querySelector('div');
        console.log(div.innerText);
        div.innerText = 'hello js <span>hello js</span>';
        console.log(div.innerText);
    </script> -->

    <!-- <div>
            <span>hello world</span>
            <span>hello world</span>
       </div>
       <script>
            var div = document.querySelector('div');
         
            // 读取页面内容
            console.log(div.innerHTML);
            // 修改页面内容
            div.innerHTML = '<span>hello js</span>'
       </script> -->

    <!-- <img src="123.jpg" alt="这是一朵花" title="玫瑰花">
    <script>
        var img = document.querySelector('img');
        console.dir(img);
        console.log(img);
        console.log(img.src);
        console.log(img.title);
        console.log(img.alt);

        img.onclick = function() {
            if (img.src.lastIndexOf('./男.png') !== -1) {
                img.src = './男.png';
            } else {
            img.src = './女.png';
            }
        }

    </script> -->

    <!-- <input type="button" value="播放">
    <script>
        var btn = document.querySelector('input');
        btn.onclick = function() {
            if(btn.value=="播放"){
                btn.value = '暂停';
            } else{
                btn.value = '播放';
            }
        }
    </script> -->
    
    
    <!-- <input type="checkbox" id="all">我全都要 <br>
    <input type="checkbox" class="girl">貂蝉 <br>
    <input type="checkbox" class="girl">小乔 <br>
    <input type="checkbox" class="girl">安琪拉 <br>
    <input type="checkbox" class="girl">妲己 <br>
    
    <script>
        // 1. 先获取元素
        var all = document.querySelector("#all");
        var girls = document.querySelectorAll(".girl");
        
        // 2. 给all 注册点击事件，  选中/取消所有选型
        all.onclick = function(){
            for(var i=0; i<girls.length;i++){
                girls[i].checked = all.checked;
            }
        } 
        console.log(girls[0].checked);
        // 3. 给girl注册点击事件
        for(var i = 0; i<girls.length; i++){
            girls[i].onclick = function() {
                // 检测当前是不是所有的girl都被选中
                all.checked = checkGirls(girls);
            }
        }
        //4. 实现checkGirls
        function checkGirls(girls) {
            for(var i=0; i<girls.length; i++){
                if(!girls[i].checked){
                    // 只要一个girl没被选中，就认为结果是  false
                    return false;
                }
            }
            return true;
        } -->
    <!-- </script> -->

    <!-- <div style="font-size: 20px; font-weight: 700;">
         哈哈
    </div>
    <script>
        var div = document.querySelector('div');
        div.onclick = function () {
        console.log(this.style.fontSize);
        console.log(this.style.fontWeight);
        var curFontSize = parseInt(this.style.fontSize);
        curFontSize += 10;
        this.style.fontSize = curFontSize + "px";
        }
    </script> -->
    
    <!-- <div class="container light">
        这是一大段话. <br>
        这是一大段话. <br>
        这是一大段话. <br>
        这是一大段话. <br>
    </div>
    <script>
        //1. 获取元素
        var div = document.querySelector('div');
        div.onclick = function() {
            console.log(div.className);
            if(div.className.indexOf('light') != -1){
                div.className = 'container dark';
            }else{
                div.className = 'container light';
            }
        }

    </script> -->

    <!-- <div class="container">
        <div>看一看所谓的最后一个节点</div>
        <a href="#">随便</a>
        <p>倒数第二个节点</p>
    </div>

    <script>
        var div = document.createElement('div');
        div.id = 'mydiv';
        div.className = 'box';
        div.innerHTML = 'hehe';
        console.log(div);

        var container = document.querySelector('.container');
        container.appendChild(div);

    </script> -->

    <div class="container">
        <div>11</div>
        <div>22</div>
        <div>33</div>
        <div>44</div>
    </div>

    <script>
        var newDiv = document.createElement('div');
        newDiv.innerHTML = "我是新的节点";
        var container = document.querySelector('.container');
        console.log(container.children);
        container.insertBefore(newDiv, container.children[3]);
        // for(var i=0; i<container.children.length; i++)
        // {
        //     container.insertBefore(newDiv, container.children[i]);
        // }

    </script>



</body>
</html>